<template>
    <div class="mkcard">
        <div class="article" v-if="zhdata.article"><div class="imgbox" v-html="zhdata.article"></div></div>
        <div class="problem" v-if="zhdata.qt">
			<div class="spaninline">{{ksdata.id}}.</div>
			<div class="imgbox" v-html="zhdata.qt"></div>
		</div>
        <div class="itemlist">
            <u-cell-group>
                <u-cell v-for="(ans,anindex) in ansarr" :key="anindex" clickable value-class="itemlist-i" :data-index="anindex" @click="toggleselect(ans.title)">
                    <div slot="right-icon" class="item-right-icon">
                    	<u-icon name="checkmark-circle-fill" color="#2979ff" size="24" v-if="sel.includes(ans.title)"></u-icon>
                    	<u-icon name="minus-circle" size="24" v-else></u-icon>
                    </div> 
					<div slot="title" v-html="ans.title +'.'+ans.content" class="imgbox"></div>
                </u-cell>
            </u-cell-group>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            ksdata:{
                type: Object,
                default: ()=>{}
            },
        },
        data() {
            return {
                ansarr:[
                    {title:'A', content: this.imgzh(this.ksdata.item1)},
                    {title:'B', content: this.imgzh(this.ksdata.item2)},
                    {title:'C', content: this.imgzh(this.ksdata.item3)},
                    {title:'D', content: this.imgzh(this.ksdata.item4)}
                ],
                sel:[],
				zhdata: {}
            }
        },
        created(){
			this.zhdata.article = this.imgzh(this.ksdata.article)
			this.zhdata.qt = this.imgzh(this.ksdata.qt)
        },
        methods: {
            submittm(){
                var that = this
                var zdzhuangtai = ''
                if (that.sel.sort().join(',') == that.ksdata.correct) {zdzhuangtai = 1} else {zdzhuangtai = 2}
                that.$emit('rowselect', that.ksdata.id, zdzhuangtai, that.sel)   //将答案提交给父组件
            },
            toggleselect(item){
                var that = this
                if (that.mkend) return
                that.Changeselect(item)
            },
            Changeselect(event){
                var that = this
                if (that.mkend) return
                if (that.ksdata.more == '否') {
                    that.sel = [event]
                } else{
                    if (that.sel.includes(event)) {
                        that.sel = that.sel.filter(item => {return item != event});
                    }else{
                        that.sel.push(event)
                    }
                    that.sel = that.sel.filter(Boolean).sort()
                }
                that.submittm()
            },
            imgzh(str){ 
				return str.replace(/\<img/gi, '<img style="max-width:100%;height:auto;" mode="widthFix" ')
			},
        },
    }
</script>

<style scoped>
</style>
